<template>
  <div id="app" class="flex flex-col min-h-screen bg-gray-100 dark:bg-gray-900">
    <LoadingSpinner :loading="isLoading" />
    <ErrorAlert v-if="error" :message="error" />
    <Notification />
    <!-- 固定的顶部导航栏 -->
    <nav class="bg-white shadow-sm">
      <div class="mx-auto px-4">
        <div class="flex justify-between h-14">
          <div class="flex">
            <div class="flex-shrink-0 flex items-center">
              <img src="@/assets/logo.svg" class="h-6 w-6 mr-2" alt="AI Trade Logo" />
              <span class="text-lg font-semibold text-purple-600">AI Trade</span>
            </div>
            <div class="ml-6 flex items-center space-x-4">
              <router-link 
                v-for="route in mainRoutes"
                :key="route.path"
                :to="route.path" 
                class="nav-link"
                :class="{ 'nav-link-active': $route.path === route.path }"
              >
                {{ route.meta.title }}
              </router-link>
            </div>
          </div>

          <div class="flex items-center space-x-4">
            <ThemeToggle />

            <button 
              @click="toggleNotifications" 
              class="p-1.5 rounded-full hover:bg-gray-100 transition-colors relative"
              :title="'通知'"
            >
              <svg class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
              </svg>
              <span v-if="notificationCount > 0" class="absolute -top-1 -right-1 h-4 w-4 bg-red-500 rounded-full text-xs text-white flex items-center justify-center">
                {{ notificationCount }}
              </span>
            </button>

            <button 
              @click="toggleUserMenu" 
              class="flex items-center p-1.5 rounded-full hover:bg-gray-100 transition-colors"
            >
              <img 
                src="@/assets/avatar.svg" 
                class="h-8 w-8 rounded-full border border-gray-200"
                alt="User Avatar" 
              />
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- 可滚动的主内容区域 -->
    <main class="flex-1 relative">
      <div class="absolute inset-0 overflow-y-auto">
        <router-view></router-view>
      </div>
    </main>

    <!-- 固定的页脚 -->
    <footer class="bg-white border-t border-gray-200">
      <div class=" mx-auto px-4">
        <div class="flex items-center justify-between h-9">
          <div class="flex items-center space-x-4 text-sm text-gray-500">
            <div class="flex items-center">
              <span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2"></span>
              系统状态: 正常
            </div>
            <div>最后更新: <span id="last-update-time">2024-01-20 15:30</span></div>
            <div>数据源: <span id="data-source">实时</span></div>
          </div>
          <div class="flex items-center space-x-4 text-sm">
            <button class="text-blue-600 hover:text-blue-700">
              系统设置
            </button>
            <button class="text-blue-600 hover:text-blue-700">
              帮助文档
            </button>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAITradeStore } from './store'
import { initTheme } from '@/utils/theme'
import ThemeToggle from '@/components/global/ThemeToggle.vue'
import LoadingSpinner from '@/components/global/LoadingSpinner.vue'
import ErrorAlert from '@/components/global/ErrorAlert.vue'
import Notification from '@/components/global/Notification.vue'

const router = useRouter()
const store = useAITradeStore()
const notificationCount = ref(2)
const isLoading = ref(false)
const error = ref(null)

onMounted(() => {
  initTheme()
})

// 计算主要路由
const mainRoutes = computed(() => {
  return router.options.routes.filter(route => {
    // 排除设置和详情页面，只显示主要导航项
    return !['Settings', 'StockDetail'].includes(route.name) && route.meta?.title
  })
})

// 删除 toggleTheme 函数，因为我们现在使用 ThemeToggle 组件

const toggleNotifications = () => {
  // 实现通知面板的显示/隐藏逻辑
}

const toggleUserMenu = () => {
  // 实现用户菜单的显示/隐藏逻辑
}
</script>

<style>
@import './css/main.css';

#app {
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.nav-link {
  @apply px-3 py-2 text-sm font-medium transition-colors relative;
  @apply text-gray-600 hover:text-purple-600;
}

.nav-link::after {
  content: '';
  @apply absolute bottom-0 left-0 w-full h-0.5 bg-transparent transition-colors;
}

.nav-link:hover::after {
  @apply bg-purple-100;
}

.nav-link-active {
  @apply text-purple-600;
}

.nav-link-active::after {
  @apply bg-purple-600;
}

/* Dark mode styles */
.dark {
  @apply bg-gray-900 text-gray-100;
}

.dark .nav-link {
  @apply text-gray-300 hover:text-purple-400;
}

.dark .nav-link:hover::after {
  @apply bg-purple-900;
}

.dark .nav-link-active {
  @apply text-purple-400;
}

.dark .nav-link-active::after {
  @apply bg-purple-400;
}

/* Dark mode footer */
.dark footer {
  @apply bg-gray-800 border-gray-700;
}

.dark footer .text-gray-500 {
  @apply text-gray-400;
}

.dark footer .text-blue-600 {
  @apply text-blue-400;
}

.dark footer .hover\:text-blue-700:hover {
  @apply text-blue-300;
}

/* Transition for theme change */
.theme-transition {
  transition: background-color 0.3s ease, color 0.3s ease;
}
</style>